<template>
 <div class="top" >
<mt-cell class="cell-item"  title="姓名" :value="item.username"></mt-cell>
<mt-cell class="cell-item" title="手机号" :value="item.phone"></mt-cell>
<mt-cell class="cell-item" title="身份证号" :value="item.idCard"></mt-cell>
<mt-cell class="cell-item" title="所在单位" :value="item.department"></mt-cell>
<mt-cell class="cell-item" title="职务" :value="item.job"></mt-cell>
 <mt-button class="btn" @click="edit" type="primary">修改</mt-button>

 </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      update: true,
      item: {
        username: "张三",
        phone: "13066914220",
        idCard: "44258855258452",
        department: "智慧城市",
        job: "工程师"
      }
    };
  },
  methods: {
     edit(){
      this.$router.push({
        path:"/edit"
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top{
  
   position: absolute;
    top:0;
    width: 100%;
    padding-top: 20px;
    background: rgb(245, 245, 245);
    bottom: 0;
}
.btn {
  padding: relative;
  display: block;
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  color: white;
  border-radius: 30px;
}


.mint-field-core,
.mint-cell-value {
  position: relative;
  text-align: right;
}
input {
  position: relative;
  text-align: right;
}


</style>
